<template>
	<view class="backpage">
		<view style="background: #fff;padding: 30rpx;">
			<u-form ref="form" :model="formData" :rules="rules" label-width="80">
				<u-form-item prop="type" label="反馈类型" borderBottom="true" required>
					<view style="flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 28rpx;" @click="itemClick(formData.type)">
						<view style="padding: 6px 0;">
							<text v-if="formData.type">{{dictLabel(selectData, formData.type)}}</text>
							<text v-else style="color: #aaa;">请选择</text>
						</view>
						<u-icon name="arrow-right" color="#888"></u-icon>
					</view>
				</u-form-item>
				<u-form-item prop="content" label="详细描述" borderBottom="true" required>
					<u-textarea v-model="formData.content" placeholder="请输入10个字以上的问题描述以便我们提供更好的帮助" count maxlength="500"></u-textarea>
				</u-form-item>
				<u-form-item prop="files" :label="'截图('+formData.files.length+'/3)'" required>
					<u-upload :fileList="formData.files" :disabled="formData.files.length==3" @afterRead="afterRead" @click="beforeRead" @delete="deletePic" :maxCount="3"></u-upload>
				</u-form-item>
			</u-form>
		</view>
		
		<sy-picker ref="sypicker" mobile="1" :type="0" :items="selectData" @select="handleSelect" />
		
		<!-- <view style="height: 180rpx;">
			<view style="position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx 30rpx 60rpx 30rpx;box-shadow: 0 0 5px 2px #eee;z-index: 5;background: #fff;">
				<u-button type="primary" @click="onsubmit()">提交</u-button>
			</view>
		</view> -->
		 <view class="next_btn_box">
            <u-button class="next_btn" type="primary" color="#007aff" @click="onsubmit">提交</u-button>
        </view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import {dictLabel} from "@/utils/common.js"
import { upLoad,feedbackAdd } from '@/api/qss/zxhapi.js'

const sypicker = ref('')
const selectData = ref([{text:'功能异常',value:'1'},{text:'产品建议',value:'2'},{text:'其他',value:'0'}])
const form = ref('')
const formData = ref({
	type: '',
	content: '',
	files: []
})
const rules = ref({
    type:[{ required: true, message: '请选择反馈类型' }],
    content:[{ required: true, message: '请输入详细内容' }],
    files:[{ required: true, message: '请上传截图' }]
})

//提交
function onsubmit(){
	form.value.validate().then(() => {
		let url = formData.value.files.map(m=>m.fileUrl)
		let param = {
			type: formData.value.type,
			content: formData.value.content,
			url: url.join(',')
		}
		feedbackAdd(param).then(res=>{
			// console.log(res)
			if(res.code == 200){
				formData.value = { type: '', content: '', files: [] }
				uni.showToast({ title: "提交成功", duration: 1000 })
				setTimeout(()=>{
					uni.navigateBack()
				}, 1000)
			}
		}).finally(()=>{
			uni.hideLoading()
		})
	}).catch(err => {
		//验证未通过
	})
}
//选择类型
function itemClick(val){
	sypicker.value.showPicker(val)
}
function handleSelect(e){
	formData.value.type = e.value
}

//权限
function beforeRead() {
	
}
//上传附件
function afterRead(e){
	let file = { path: e.file.url, name: e.file.name, type: "file" }
	upLoad(file).then(res=>{
		if(res.data){
			let token = uni.getStorageSync('token')
			formData.value.files.push({
				url: res.data.url+`?platform=corp&Authorization=Bearer ${token}`,
				fileUrl: res.data.url,
				name: e.file.name,
			})
		} else {
			if(res.code == 401){
				uni.showToast({ title: "登录已过期", icon: "none"})
				setTimeout(()=>{
					uni.removeStorageSync("token")
					uni.removeStorageSync("phone")
					uni.removeStorageSync('userInfo')
					// uni.removeStorageSync('role')
					uni.removeStorageSync('activeProject')
					uni.reLaunch({
						url: "/pages/login/index"
					})
				}, 500)
			}
		}
	}).finally(()=>{
		uni.hideLoading()
	})
}
//删除附件
function deletePic(e) {
	formData.value.files.splice(e.index, 1)
}

onLoad((option)=>{
	
})

</script>

<style lang="less">
@import '../static/style/index.scss';

page{
	background: #f8f8f8;
}
.backpage{
	border-top: 20rpx solid #f8f8f8;
}
</style>